<template>
     <span class="groid_top" style="display: inline-block; color: aliceblue; font-size: 36px">℃</span>
          <span style="display: inline-block; margin-left: 90px">
            <img src="../../../public/images/白天晴 2.png"alt=""style="width: 20px; height: 20px"/>
              <span style="color: yellow; font-size: 13px">高温预警</span>
          </span>
          <div class="groid_top_solit">
            <div class="groid_top_solit_top">
              <img src="../../../public/images/体感 2.png"alt=""style="width: 15px; margin-left: 10px"/>
              <span style="color: aliceblue; font-size: 14px">体感</span>
              <span style="color: aliceblue; float: right; margin-right: 10%">℃</span>
            </div>
            <div class="groid_top_solit_main">
              <img src="../../../public/images/风力 2.png"alt=""style="width: 15px; margin-left: 10px"/>
              <span style="color: aliceblue; font-size: 14px">风力</span>
            </div>
            <div class="groid_top_solit_botton">
              <img src="../../../public/images/湿度 2.png"alt=""style="width: 15px; margin-left: 10px"/>
              <span style="color: aliceblue; font-size: 14px">湿度</span>
            </div>
          </div>
          <div class="groid_top_solit1">
            <div class="grid_top_solit1_left">
              <span style="color: aliceblue; margin-left: 6%">~</span>
              <span style="color: aliceblue; margin-left: 10%">℃</span>
              <span style="margin-left: 40%">
                <img src="../../../public/image/Icon／智能检测／夜晚晴 2.png"alt=""style="width: 22px"/></span>
              <div>
                <span style="color: aliceblue;margin-left: 6%;display: inline-block;margin-top: 7%;">今天</span>
                <span style="display: inline-block;width: 30%;height: 15px;border: solid 1px #ccc;border-radius: 10px;background: lawngreen;margin-left: 5%;margin-top: 7%;"></span
                ><span style="color: aliceblue; margin-left: 10%">晴</span>
              </div>
            </div>
            <div class="grid_top_solit1_rigth">
              <span style="color: aliceblue; margin-left: 6%">~</span
              ><span style="color: aliceblue; margin-left: 10%">℃</span
              ><span style="margin-left: 40%"
                ><img
                  src="../../../public/image/Icon／智能检测／白天晴 2.png"
                  alt=""
                  style="width: 22px"
              /></span>
              <div>
                <span
                  style="
                    color: aliceblue;
                    margin-left: 6%;
                    display: inline-block;
                    margin-top: 7%;
                  "
                  >明天</span
                ><span
                  style="
                    display: inline-block;
                    width: 30%;
                    height: 15px;
                    border: solid 1px #ccc;
                    border-radius: 10px;
                    background: lawngreen;
                    margin-left: 5%;
                    margin-top: 7%;
                  "
                ></span
                ><span style="color: aliceblue; margin-left: 10%">晴</span>
              </div>
            </div>
          </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from "vue";
import { apiECartes1, apitq } from "@/api/server";
const list:any =ref();

onMounted( async()=>{
   const res =await apitq()
   console.log(res,'123456789');
   list.value=res.data.data;
   console.log(list.value,'================')

  
   
})

</script>

<style scoped>
  .groid_top {
  margin-top: 20px;
  margin-left: 20px;
}
.groid_top_solit {
  width: 84%;
  height: 44%;
  border: solid 1px #ccc;
  margin-top: 4%;
  margin-left: 8%;
}
.groid_top_solit_top {
  width: 100%;
  height: 30%;
  border-bottom: solid 1px #ccc;
  line-height: 30px;
}
.groid_top_solit_main {
  width: 100%;
  line-height: 40px;
  height: 37%;
  border-bottom: solid 1px #ccc;
}
.groid_top_solit_botton {
  width: 100%;
  line-height: 40px;
  height: 37%;
}
.groid_top_solit1 {
  width: 84%;
  height: 23%;
  border: solid 1px #ccc;
  margin-top: 8%;
  margin-left: 8%;
}
.grid_top_solit1_left {
  width: 50%;
  margin-top: 2%;
  height: 80%;
  border-right: solid 1px #ccc;
  float: left;
}
.grid_top_solit1_rigth {
  width: 50%;
  margin-top: 2%;
  height: 80%;
  float: left;
}

</style>